<template>
    <div class="comment-reply">
        <div class="scroll-fixed">
            <van-nav-bar placeholder :title="comment.reply_count > 0 ? `${comment.reply_count}条回复` : '暂无回复'">
                <template #left>
                    <van-icon name="cross" @click="$emit('close')" />
                </template>
            </van-nav-bar>
            <!-- 评论项 -->
            <comment-item  @upCommentPraise="$emit('upCommentPraise',$event)" :comment="comment"></comment-item>

            <!-- 评论回复列表 -->
            <van-cell title="全部回复"></van-cell>
        </div>
        <div class="scroll-scroll">
            <comment-list :list="commentList" @onload-success="onloadSuccess" :source="comment.com_id" :type=typeC></comment-list>
        </div>

        <!-- 回复评论 -->
        <div class="reply-bottom">
            <van-button class="write-btn" size="small" @click="isPostShow = true" round>写评论</van-button>
        </div>

        <!-- 对评论进行评论 -->
        <van-popup :style="{ height: '16%' }" v-model:show="isPostShow" position="bottom">
            <comment-post @psot-success="onPostSuccess" :target="comment.com_id"></comment-post>
        </van-popup>
    </div>
</template>

<script>
import { ref } from 'vue'
import commentItem from './commentItem.vue'
import commentList from './commentList.vue'
import commentPost from './commentPost.vue'
export default {
  name: 'commentReply',
  props: {
    comment: {
      type: Object,
      required: true
    }
  },
  components: {
    commentItem,
    commentList,
    commentPost
  },
  setup (props, content) {
    const typeC = ref('c')
    const commentList = ref([])
    const isPostShow = ref(false)
    const onPostSuccess = (data) => {
      // 更新回复数量 关闭弹层 新评论置顶
      content.emit('upReply_count')
      // props.comment.reply_count++

      isPostShow.value = false

      commentList.value.unshift(data.new_obj)
    }
    const onloadSuccess = (data) => {
      const { results } = data
      commentList.value.push(...results)
    }
    return {
      typeC,
      isPostShow,
      commentList,
      onPostSuccess,
      onloadSuccess
    }
  }
}
</script>

<style scoped lang="less">
.comment-reply {
    position: absolute;
    width: 100%;
}

.scroll-fixed {
    position: fixed;
    width: 100%;
    z-index: 2;
}

.scroll-scroll {
    margin-top: 440px;
    overflow-y: auto;
}

.reply-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-top: 1px solid #d8d8d8;

    .write-btn {
        width: 60%;
    }
}
</style>
